<template>
    <div class="offerBox">
        <div class="curPrice">
            <h3>{{detail.auctionCurrentPrice?detail.auctionCurrentPrice.decimalTwoString:'0.00'}}</h3>
            <p>当前出价(￥)</p>
        </div>
        <div class="computed">
            <Stepper v-if="detail.auctionPrice" v-model="price" :number="detail.auctionPrice.num" :min="detail.auctionPrice.num" :readonly="true"/>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Stepper from '@/components/stepper.vue'
import myButton from '@/components/myButton.vue'
import { toast } from '@/utils/common'
export default {
    props:{

    },
    components:{
        Stepper,
        myButton
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            price:0,
            detail:computed(()=>store.state.arApi.detail),
            detailType:computed(()=>store.state.arApi.detailType)  // 1为商品详情，2为拍卖详情
        })
        
        onMounted(()=>{
            state.price = state.detail.auctionPrice.num
        })

        const close = ()=>{
            context.emit('close')
        }

        const confirmOffer = async ()=>{
            const auctionCurrentPrice = state.detail.auctionCurrentPrice?state.detail.auctionCurrentPrice.num:0
            if(auctionCurrentPrice>0 && (state.price<=auctionCurrentPrice*0.1)){  //出价必须大于当前出价的10%，
                return toast(`出价必须大于${Math.floor(auctionCurrentPrice*0.1)}`)
            }
            router.push(`/order/${state.detail.goodsId}?price=${state.price}`)  // 
            
        }

        return{
            ...toRefs(state),
            close,
            confirmOffer
        }
    }
}
</script>

<style lang="scss" scoped>
    .offerBox{
        .curPrice{
            width: 100%;
            height: 158px;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
            h3{
                font-size: 48px;
                font-weight: normal;
                padding: 20px 0 0 0;
            }
            p{
                font-size: 28px;
                color: #839797;
            }
        }
        .computed{
            height: 120px;
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.5);
            margin: 30px 0 0 0;
            padding: 22px 50px 0 50px;
        }
    }
</style>